<template>
  <div class="review-container">
    <avue-crud
      :data="data"
      :option="option"
      @on-load="onLoad"
      @row-del="onDelete"
    >
      <template #menu="{ row }">
        <el-switch
          v-model="row.status"
          :active-value="1"
          :inactive-value="0"
          @change="updateStatus(row)"
        />
      </template>

      <template #status="{ row }">
        <el-tag :type="row.status === 1 ? 'success' : 'info'">
          {{ row.status === 1 ? '显示' : '隐藏' }}
        </el-tag>
      </template>

      <template #rating="{ row }">
        <el-rate
          v-model="row.rating"
          disabled
          show-score
        />
      </template>
    </avue-crud>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const option = {
  align: 'center',
  menuAlign: 'center',
  height: 500,
  searchMenuSpan: 6,
  column: [
    {
      label: '评价ID',
      prop: 'id',
      search: true
    },
    {
      label: '用户ID',
      prop: 'user_id',
      search: true
    },
    {
      label: '商品ID',
      prop: 'product_id',
      search: true
    },
    {
      label: '订单号',
      prop: 'order_no',
      search: true
    },
    {
      label: '评分',
      prop: 'rating',
      type: 'number',
      min: 1,
      max: 5
    },
    {
      label: '评价内容',
      prop: 'content',
      type: 'textarea',
      minRows: 2,
      search: true
    },
    {
      label: '评价图片',
      prop: 'images',
      type: 'upload',
      listType: 'picture-card',
      multiple: true,
      limit: 6,
      action: '/api/upload',
      propsHttp: {
        res: 'data.url'
      }
    },
    {
      label: '状态',
      prop: 'status',
      type: 'select',
      dicData: [
        { label: '显示', value: 1 },
        { label: '隐藏', value: 0 }
      ],
      search: true
    },
    {
      label: '评价时间',
      prop: 'create_time',
      type: 'datetime',
      format: 'YYYY-MM-DD HH:mm:ss',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      search: true,
      searchRange: true
    }
  ]
}

const data = ref([
  {
    id: 1,
    user_id: 'U10001',
    product_id: 1,
    order_no: 'DD20240426001',
    rating: 5,
    content: '苹果非常新鲜，口感很好，物流也很快！',
    images: ['https://img.example.com/review1.jpg'],
    status: 1,
    create_time: '2024-04-26 15:00:00'
  },
  {
    id: 2,
    user_id: 'U10002',
    product_id: 2,
    order_no: 'DD20240426002',
    rating: 4,
    content: '香蕉很好吃，就是有点太熟了',
    images: ['https://img.example.com/review2.jpg', 'https://img.example.com/review3.jpg'],
    status: 1,
    create_time: '2024-04-26 16:00:00'
  },
  {
    id: 3,
    user_id: 'U10003',
    product_id: 3,
    order_no: 'DD20240426003',
    rating: 5,
    content: '椰青很新鲜，椰肉很厚，很满意！',
    images: [],
    status: 1,
    create_time: '2024-04-26 17:00:00'
  }
])

const onLoad = (page, params) => {
  return {
    data: data.value,
    total: data.value.length
  }
}

const updateStatus = (row) => {
  row.status = row.status
  ElMessage.success('更新成功')
}

const onDelete = (row) => {
  const index = data.value.findIndex(item => item.id === row.id)
  if (index !== -1) {
    data.value.splice(index, 1)
    ElMessage.success('删除成功')
  }
  return true
}
</script>

<style scoped>
.review-container {
  background-color: var(--white-color);
  padding: var(--main-padding);
  border-radius: var(--border-radius);
}
</style>